<template>
  <div class="filter-wrapper">
    <el-row>
      <el-col :span="6">
        <span>关键字</span>
        <div class="control-wrapper">
          <el-input type="text" v-model="keyword" placeholder="关键字" :size="size" />
        </div>
      </el-col>
      <el-col :span="6">
        <span>影片类型</span>
        <div class="control-wrapper">
          <el-select v-model="genre" filterable placeholder="影片类型" :size="size">
            <el-option
              v-for="item in allGenres"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <span>制片国家/地区</span>
        <div class="control-wrapper">
          <el-select v-model="region" filterable placeholder="制片国家/地区" :size="size">
            <el-option
              v-for="item in allRegions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <span>上映年份</span>
        <div class="control-wrapper">
          <el-date-picker
            v-model="pubYear"
            type="year"
            align="right"
            placeholder="上映年份"
            value-format="yyyy"
            :size="size"
          ></el-date-picker>
        </div>
      </el-col>
    </el-row>
    <div class="submit-wrapper">
      <el-button type="primary" @click="submit" :size="size" class="submit-button">查询</el-button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "QueryFilter",
  props: {
    size: {
      type: String,
      default: "small"
    }
  },
  data() {
    return {
      keyword: "",
      genre: "0",
      region: "0",
      pubYear: ""
    };
  },
  computed: {
    ...mapState(["genres", "regions"]),
    allGenres() {
      return [{ id: "0", name: "全部" }, ...this.genres];
    },
    allRegions() {
      return [{ id: "0", name: "全部" }, ...this.regions];
    }
  },
  methods: {
    submit() {
      const data = {
        keyword: this.keyword,
        genre: this.genre,
        region: this.region,
        pubYear: this.pubYear
      };
      this.$emit("query", data);
    },
    initialState() {
      const { keyword, genre, region, pubYear } = this.$route.query;
      this.keyword = keyword || "";
      this.genre = genre || "0";
      this.region = region || "0";
      this.pubYear = pubYear || "";
    }
  },
  created() {
    this.initialState();
  }
};
</script>

<style lang="scss" scoped>
.filter-wrapper {
  .control-wrapper {
    width: 200px;
    margin-top: 5px;
  }
  .submit-wrapper {
    margin-top: 10px;
    .submit-button {
      width: 100px;
    }
  }
}
</style>